<template>
  <section class="barista-section">
      <el-col
        v-for="barista in baristas"
        :key="barista.id"
        :xs="24"
        :sm="12"
        :md="6"
        :lg="4"
      >
        <div class="barista-card">
          <div class="avatar-wrap">
            <img src="/coffee/master.png" alt="avatar" />
          </div>
          <div class="info">
            <h3>{{ barista.name }}</h3>
            <p>{{ barista.title }}</p>
          </div>
        </div>
      </el-col>
  </section>
</template>

<script setup>
import { ref } from 'vue'

const baristas = ref([
  { id: 1, name: 'Lily', title: 'SCA认证咖啡师', avatar: '/mock-img.jpg' },
  { id: 2, name: 'Jacky', title: '拉花艺术冠军', avatar: '/mock-img.jpg' },
  { id: 3, name: 'Milo', title: 'WBC参赛选手', avatar: '/mock-img.jpg' },
  { id: 4, name: 'Yuki', title: '配方研发主管', avatar: '/mock-img.jpg' }
])
</script>

<style scoped>
.barista-section {
  width: 1000px;
  margin: 0 auto;
  padding: 50px 20px;
  background: #fefcf9;
  display: flex;
  justify-content: space-around;
  text-align: center;
  overflow: hidden;
}

.barista-card {
  /* background: rgba(255, 255, 255, 0.5); */
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(12px);
  text-align: center;
  padding: 32px 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.4);
  height: 240px;
  width: 190px;
}

.barista-card::before {
  content: '';
  position: absolute;
  top: -60%;
  left: -40%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, #ffefc5, #fff5e4, #fffefc, #ffefc5);
  opacity: 0.05;
  z-index: 0;
  animation: rotate 12s linear infinite;
}

@keyframes rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.avatar-wrap {
  width: 100px;
  height: 100px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 3px #e0d6c6;
}

.avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info h3 {
  font-size: 18px;
  font-weight: 600;
  color: #4a2e18;
  margin-bottom: 6px;
}

.info p {
  font-size: 14px;
  color: #777;
}
</style>
